<template>
    <div class="meeting" @click="handleClickOutside">
        <div class="meeting_box" v-if="flag">
            <div class="top">
                <img src="../../assets/signintitle.jpg">
                <div class="selectMeeting" @click="meetingFalg = !meetingFalg" ref="container">
                    <p class="p_meeting" v-if="Object.keys(selectData).length == 0">请选择会议</p>
                    <p class="p_meeting" v-if="Object.keys(selectData).length != 0">{{ selectData.meetName }}</p>
                    <el-icon>
                        <ArrowDown />
                    </el-icon>
                    <div class="popup_box" v-if="meetingFalg">
                        <div>
                            <p :class="{ 'meeting_li': this.selectData.id == item.id }" @click="selectMeet(item)"
                                v-for="item in meetingList" :key="item.id">{{
        item.meetName }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main">
                <div class="left">
                    <div class="title">
                        未打卡
                    </div>
                    <!-- <div> -->
                    <ul>
                        <li v-for="(item, index) in leftList" :key="index">{{ item }}</li>
                        <!-- <li v-for="(item, index) in leftList" :key="index">
                                {{ item }}
                            </li> -->
                    </ul>
                    <!-- </div> -->
                </div>
                <div class="center">
                    <p>微信扫描二维码进行会议打卡</p>
                    <div class="twoCode">
                        <img v-show="imgUrl" :src="imgUrl" alt="">
                    </div>
                </div>
                <div class="right">
                    <div class="title">
                        已打卡
                    </div>
                    <ul>
                        <li v-for="(item, index) in rightList" :key="index">
                            {{ item.teacherName }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- <div class="logIn_box" v-if="!flag">
            <div class="top">
                <img src="../../assets/signintitle.jpg">
            </div>
            <div class="form_box">
                <h3>账号登录</h3>
                <div class="input_box">
                    <img src="../../assets/loginperson_icon.png">
                    <p class="xian"></p>
                    <input type="text" placeholder="请输入账号" v-model="number">
                </div>
                <div class="input_box input_box1">
                    <img src="../../assets/loginpassword_icon.png">
                    <p class="xian"></p>
                    <input type="text" placeholder="请输入密码" v-model="passward">
                </div>
                <button @click="login">登录</button>
            </div>
        </div> -->
    </div>
</template>

<script>
import { httpService } from "@/utils/httpService";
import { formatTime } from "@/utils/dateFormat";
import { ElMessage } from 'element-plus'
import { ArrowDown } from "@element-plus/icons-vue";
import { API_BASE_URL } from '../../constants';

export default {
    name: "signIn",
    data() {
        return {
            flag: true,
            passward: '',
            number: '',
            meeting: '今日会议',
            meetingList: [],
            selectData: {},
            meetingFalg: false,
            leftList: {},
            rightList: [],
            imgUrl: '',
            timer: null,
            timer1: null,
            startdate: '',
        };
    },
    components: {
        ArrowDown
    },
    mounted() {
        this.startdate = formatTime(new Date())
        document.addEventListener('click', this.handleClickOutside);
        this.getMeetingList()
    },
    beforeUnmount() {
        document.removeEventListener('click', this.handleClickOutside);
    },
    methods: {
        handleClickOutside(event) {
            if (!this.$refs.container.contains(event.target)) {
                this.meetingFalg = false;
            }
        },
        getMeetingList() {
            httpService("/javaApi/schoolMeetingList/list/1/100", { "campus": 2 }, "get").then(
                (data) => {
                    this.meetingList = data.list
                    const originalDate = new Date(data.list[0].startTime);
                    const nextDay = new Date(originalDate);
                    nextDay.setDate(nextDay.getDate() + 1);
                    // console.log(123, this.startdate == nextDay.toISOString().slice(0, 10));
                    if (this.startdate == nextDay.toISOString().slice(0, 10)) {
                        this.selectMeet(data.list[0])
                    }
                }
            );
        },

        selectMeet(data) {
            this.selectData = data
            this.getConferee(this.selectData.meetId)
            this.getQrCode(this.selectData.meetId)

            if (this.timer) {
                clearInterval(this.timer);
            }
            this.timer = setInterval(() => {
                this.getQrCode(this.selectData.meetId)
            }, 2000)
            if (this.timer1) {
                clearInterval(this.timer1);
            }
            this.timer1 = setInterval(() => {
                this.getConferee(this.selectData.id)
            }, 2000)

        },
        getConferee(id) {
            httpService("/javaApi/schoolMeetingList/listAllTeacher", { 'id': id, }, "get").then(
                (data) => {
                    this.leftList = data.leftList
                    this.rightList = data.rightList
                }
            );
        },
        getQrCode(id) {
            let randomNum = Math.floor(Math.random() * 9) + 1;
            let mettingId = randomNum + '' + id
            let time = new Date().getTime()
            // console.log(time);
            httpService(`/javaApi/schoolMeetingList/getQrCode/${mettingId}`, {}, "get").then(
                (data) => {
                    // console.log(data.message,time);
                    // this.imgUrl = API_BASE_URL + '/javaApi' + data.message + '?time=' + time
                    // console.log(this.imgUrl);
                    this.imgUrl = API_BASE_URL + data.message

                }
            );
        },
        login() {
            if (this.number == '' || this.passward == '') {
                ElMessage.error('账号或密码不能为空')
            } else if (this.number != 123 && this.passward != 123) {
                ElMessage.error('账号或密码错误')
            } else if (this.number == 123 && this.passward == 123) {
                this.flag = true
            }
        },
        realTimeSwitch() {
            timer1 = setInterval(() => {
                clearInterval(timer1)
                this.getConferee(this.selectData.meetId)
                this.getQrCode(this.selectData.meetId)
            }, 5000)
        },
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.meeting {
    width: 100vw;
    min-height: 100vh;
    background-image: url(../../assets/signinbg.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: black;
    position: relative;
}

.top {
    width: 35%;
    margin: 0 auto;
    /* padding: 73px 0 63px; */
    /* padding: 2.5vw 0 4.8vw; */
    padding: 1vw 0;
    position: relative;
}

.top img {
    width: 100%;
}

.main {
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
}

.left,
.right {
    /* width: 23%; */
    width: 15%;
    /* height: 30vw; */
    height: 80vh;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    overflow: hidden;
    /* overflow-y: scroll; */
}

.left .title,
.right .title {
    width: 100%;
    /* height: 50px; */
    /* line-height: 50px; */
    height: 4vw;
    line-height: 4vw;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
    /* font-size: 25px; */
    font-size: 2vw;
}

.left .title {
    background-image: url(../../assets/signinno.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.right .title {
    background-image: url(../../assets/signinyes.png);
}

.left img,
.right img {
    width: 100%;
}

.left ul,
.right ul {
    margin: 0;
    padding: 0;
    /* height: calc(44vw - 60px); */
    height: 70vh;
    overflow-y: scroll;
    /* padding-bottom: 50px; */
}

.left ul::-webkit-scrollbar,
.right ul::-webkit-scrollbar {
    width: 0 !important;
}

.left ul li,
.right ul li {
    list-style: none;
    color: #666;
    font-size: 20px;
    font-size: 1.4vw;
    text-align: center;
    /* height: 50px; */
    /* line-height: 50px; */
    padding: 0.7vw 0;
    border-bottom: 1px solid #ACBFDE;
    width: 80%;
    margin: 0 auto;
}

.center {
    width: 40vw;
    padding-bottom: 30px;
    background-color: rgb(255, 255, 255, 0.9);
    border-radius: 20px;
}

.center p {
    color: #001841;
    /* font-size: 25px; */
    font-size: 25px;
    text-align: center;
    /* padding-top: 30px; */
    padding-top: 1.5vw;
    padding-bottom: 1.5vw;
    padding: 1vw 0;
}

.center .twoCode {
    border: 10px solid rgb(55, 101, 179);
    /* width: 80%;
    height: 84%; */
    width: 33vw;
    height: 33vw;
    border-radius: 20px;
    margin: 0 auto 0;
    position: relative;
}


.center .twoCode img {
    width: 98%;
    height: 98%;
    margin: 1%;
}




.form_box {
    background-color: #F6FAFF;
    width: 50%;
    /* height: 370px; */
    /* height: 70%; */
    margin: 0 auto;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 2.5vw;
}

.form_box h3 {
    color: #3765B3;
    /* font-size: 25px; */
    font-size: 2vw;
    /* margin-top: 30px; */
    margin-top: 3.2vh;
    margin-bottom: 20px;
    font-weight: 400;
}

.input_box {
    display: flex;
    align-items: center;
    background-color: #fff;
    margin: 10px;
    border: 1px solid #CCCCCC;
    width: 70%;
    /* height: 55px; */
    height: 6vh;
    border-radius: 10px;
}

.input_box1 {
    margin-top: 18px;
}

.input_box img {
    width: 33px;
    margin: 0 20px;
}

.input_box input {
    height: 85%;
    line-height: 85%;
    width: 75%;
    border: none;
    outline: none;
    padding-left: 30px;
    /* font-size: 25px; */
    font-size: 2vw;
}

.input_box input::placeholder {

    color: #CCCCCC;
}

.xian {
    width: 1px;
    height: 33px;
    background-color: #CCCCCC;
}

.form_box button {
    width: 70%;
    height: 65px;
    background-color: #3765B3;
    border: none;
    color: #fff;
    /* font-size: 25px; */
    font-size: 2vw;
    border-radius: 10px;
    margin-top: 30px;
}

.selectMeeting {
    width: 22vw;
    /* height: 50px; */
    background-color: #fff;
    position: absolute;
    left: -78%;
    /* top: 0px; */
    /* top: 9vh; */
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1vw 10px;
    /* font-size: 20px; */
    font-size: 1.5vw;
}

.selectMeeting .p_meeting {
    color: #3765B3;
}

.selectMeeting .el-icon {
    color: #999999;
}

.popup_box {
    width: 100%;
    height: 40vh;
    background-color: #fff;
    position: absolute;
    top: 90px;
    left: 0;
    border-radius: 5px;
    overflow: hidden;
}

.popup_box div {
    width: 100%;
    height: 100%;
    overflow-y: scroll;

}

.popup_box div::-webkit-scrollbar {
    width: 0 !important;
}


.popup_box p {
    width: calc(100%-20px);
    height: 50px;
    line-height: 50px;
    /* font-size: 20px; */
    font-size: 1.5vw;
    padding: 0 10px;
}

.meeting_li {
    background-color: #e3e3e3;
    color: #6b9bed !important;
}

.el-input__wrapper {
    width: 70%;
    border-radius: 20px;
}

.el-input__inner {
    height: 6vh !important;
}
</style>